<template>
<!--空气质量情况-->
    <div class="air_monitoring_airQuality">
        <CommonTitleComponent text="空气质量情况"></CommonTitleComponent>
        <div class="patrol_num">
            <div>
                <div>
                    <img src="@/assets/image/airQualityAQI.png" alt="" />
                </div>
                <div>
                    <span>AQI实时数据</span>
                    <span class="airQualityAQI">30</span>
                </div>
            </div>
            <div>
                <div>
                    <img src="@/assets/image/airqualityclass.png" alt="" />
                </div>
                <div>
                    <span>空气质量等级</span>
                    <span class="grade"><span>优</span></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "airQuality"
}
</script>

<style scoped lang="scss">
.air_monitoring_airQuality{
    height: 100%;
    padding-top: 15px;
    .patrol_num {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top:12px;
        height: calc(100% - 16px);

        > div {
            width: calc(50% - 6px);
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:nth-of-type(1) {
                margin-right: 12px;
            }

            > div {
                &:nth-of-type(1) {
                    width: 64px;
                    margin-right: 6px;
                    display: flex;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                &:nth-of-type(2) {
                    width: calc(100% - 70px);

                    span {
                        display: inline-block;
                        width: 100%;
                        text-align: center;
                        height: 22px;
                        color: #ffffff;

                        &:nth-of-type(1) {
                            font-size: 12px;
                            margin-bottom: 4px;
                            background: url('@/assets/image/AQIwriteback.png') no-repeat;
                            background-size: 100% 100%;
                            height: 22px;
                            line-height: 22px;
                        }

                        &:nth-of-type(2) {
                            font-size: 20px;
                            height: 28px;
                            line-height: 28px;
                            background: url('@/assets/image/AQIbottomback.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                    .airQualityAQI{
                        font-size: 20px;
                        font-family: PangMenZhengDao;
                        color: #FF8D10;
                    }
                    .grade{
                        span{
                            font-size: 20px;
                            font-family: PangMenZhengDao;
                            color: #0E96FF;
                            background: linear-gradient(182deg, #41F6FF 0%, #07BFFF 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }

                    }
                }
            }
        }
    }
}
</style>